<template>
  <div>
    <head-top></head-top>
    <div class="edit_container">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        class="editer"
        :options="editorOption"
        @ready="onEditorReady($event)"
      ></quill-editor>
    </div>
    <div class="submit_btn">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";

import { quillEditor } from "vue-quill-editor";
import { addMessage } from "@/api/getData";
export default {
  data() {
    return {
      content: "<h3>文本编辑</h3>",
      editorOption: {}
    };
  },
  components: {
    headTop,
    quillEditor
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    async addMessage(e) {
      const res = await addMessage(e);
      if (res.code == 0) {
        this.$message.success("提交成功！");
        this.content=""
      }
    },
    onEditorReady(editor) {
      console.log("editor ready!", editor);
    },
    submit() {
      console.log(this.content);
      var d = {
        message: this.content
      };
      this.addMessage(d);
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.edit_container {
  padding: 40px;
  margin-bottom: 40px;
}
.editer {
  height: 350px;
}
.submit_btn {
  text-align: center;
}
</style>
